<template>
  <div class="ContentLeftTop">
    <dv-border-box-12>
      <div class="title">聚爱优选2021年交易数据</div>
      <img class="imgs" src="../assets/imgs/carbg.png" alt="" />
      <div class="dealSum">
        <span>累计交易总额(万元)</span>
        <div class="content">
          <div
            class="num"
            :class="{ styNo: item == '.' }"
            v-for="(item, index) in leftTop.total"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="dealEach">
        <span>各业务交易额(万元)</span>
        <div ref="main" style="width: 400px; height: 250px"></div>
      </div>

      <div class="textTop">
        <ul>
          <li v-for="item in leftTop.subpie" :key="item.name">
            <img src="../assets/imgs/three.png" alt="" />
            <div class="text">
              <span class="dealTitle">{{ item.name }}</span
              ><br />
              <span class="dealNum">{{ item.value }}人</span>
            </div>
          </li>
        </ul>
      </div>
    </dv-border-box-12>
  </div>
</template>

<script>
export default {
  name: "ContentLeftTop",
  data() {
    return {};
  },
  props: {
    leftTop: Object,
  },
  watch: {
    leftTop: {
      deep: true,
      handler(now) {
        // console.log(now);
        this.getEcharts(now.subpie);
      },
      //immediate: true, //第一次也执行
    },
  },
  mounted() {
    this.getEcharts(this.leftTop.subpie);
  },
  methods: {
    getEcharts(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs.main);
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "0",
          left: "10%",
          // bottom: "20%",
          align: "left",
          icon: "rect",
          itemWidth: 15,
          itemHeight: 15,
          // itemGap: 50,
        },
        color: ["rgb(25, 149, 251)", "rgb(95, 245, 241)", "rgb(254, 232, 61)"],
        series: [
          {
            name: "交易额",
            type: "pie",
            radius: ["30%", "45%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: "rgb(5, 13, 45)",
              borderWidth: 5,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                length: 25, // 指示线长度
              },
            },
            label: {
              normal: {
                formatter: "{c}",
                textStyle: {
                  color: "skyblue", // 提示文字颜色
                  fontSize: 18, // 提示文字大小
                },
              },
            },
            data: data,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.ContentLeftTop {
  width: 100%;
  height: 45%;
  /* background-color: red; */
}
.ContentLeftTop .title {
  text-align: center;
  color: rgb(36, 161, 206);
  font-size: 20px;
  padding-top: 5px;
}
.ContentLeftTop .imgs {
  width: 100%;
  height: 8px;
}
.ContentLeftTop .dealEach {
  height: 190px;
}
.ContentLeftTop .dealSum span,
.ContentLeftTop .dealEach span {
  color: #ccc;
  font-size: 15px;
  margin-left: 15px;
}
.ContentLeftTop .content {
  display: flex;
  margin-left: 60px;
  padding: 10px;
}
.ContentLeftTop .content .styNo {
  background: none;
}
.ContentLeftTop .num {
  font-size: 45px;
  font-weight: bold;
  margin-right: 5px;
  background-color: rgb(30, 84, 147);
  color: #fff;
  padding: 0px 3px;
  text-align: center;
}

.ContentLeftTop .textTop {
  padding-bottom: 10px;
}
.ContentLeftTop .textTop ul li {
  margin-left: 20px;
}
.ContentLeftTop ul {
  display: flex;
}
.ContentLeftTop ul li {
  display: flex;
}
.ContentLeftTop .text {
  margin-left: 5px;
}
.ContentLeftTop .text .dealTitle {
  color: rgb(71, 197, 206);
}
.ContentLeftTop .text .dealNum {
  color: #fff;
}
</style>